<!DOCTYPE html>
<html lang="zxx">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>

    <!-- Fav Icons -->
    <link rel="shortcut icon" href="assets2/img/favicon.png" type="image/x-icon">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets2/css/style.css">
    <link rel="stylesheet" href="assets2/css/responsive.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        function appendGoods(result) {
            $("#Goods").empty();
            $.each(result, function (index, Good) {
                var div;
                if (index < 16) {
                    if (Good.count == 1) {
                        div = "<div id=\"good-" + index + "\" class=\"col-xl-4 col-lg-6 col-sm-6\">" +
                            "<div class=\"product\">" +
                            "<div class=\"product-img-wrap\">" +
                            "<a href=\"shop-detail.html?gid=" + Good.gid + "\">" +
                            "<img src=\"" + Good.g_src + "\" alt=\"img\">" +
                            "</a>" +
                            "</div>" +
                            "<div class=\"product-content-wrap\">" +
                            "<div class=\"product-content\">" +
                            "<p><a href=\"shop-detail.html?gid=" + Good.gid + "\">" + Good.g_name + "</a></p>" +
                            "</div>" +
                            "<div class=\"product-action\">" +
                            "<a href=\"#\" class=\"add-to-btn small-btn\">" +
                            "<i class=\"flaticon-shopping-cart\"></i>" +
                            "<span>添加到购物车</span>" +
                            "<h5 class=\"product-price\">$" + Good.price * Good.count + "</h5>" +
                            "</a>" +
                            "<div class=\"add-wishlist\">" +
                            "<i class=\"fa fa-heart-o\"></i>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                    } else {
                        div = "<div id=\"good-" + index + "\" class=\"col-xl-4 col-lg-6 col-sm-6\">" +
                            "<div class=\"product\">" +
                            "<div class=\"product-img-wrap\">" +
                            "<a href=\"shop-detail.html?gid=" + Good.gid + "\">" +
                            "<img src=\"" + Good.g_src + "\" alt=\"img\">" +
                            "</a>" +
                            "</div>" +
                            "<div class=\"product-content-wrap\">" +
                            "<div class=\"product-content\">" +
                            "<p><a href=\"shop-detail.html?gid=" + Good.gid + "\">" + Good.g_name + "</a></p>" +
                            "</div>" +
                            "<div class=\"product-action\">" +
                            "<a href=\"#\" class=\"add-to-btn small-btn\">" +
                            "<i class=\"flaticon-shopping-cart\"></i>" +
                            "<span>添加到购物车</span>" +
                            "<h5 class=\"product-price\"><del style='color: gray;font-weight: 300'>" + "$" + Good.price + "</del><ins style='padding-left: 20px'>" + "$" + Good.price * Good.count + "</ins></h5>" +
                            "</a>" +
                            "<div class=\"add-wishlist\">" +
                            "<i class=\"fa fa-heart-o\"></i>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                    }


                } else {
                    if (Good.count == 1) {
                        div = "<div id=\"good-" + index + "\" style=\"display: none\" class=\"col-xl-4 col-lg-6 col-sm-6\">" +
                            "<div class=\"product\">" +
                            "<div class=\"product-img-wrap\">" +
                            "<a href=\"shop-detail.html?gid=" + Good.gid + "\">" +
                            "<img src=\"" + Good.g_src + "\" alt=\"img\">" +
                            "</a>" +
                            "</div>" +
                            "<div class=\"product-content-wrap\">" +
                            "<div class=\"product-content\">" +
                            "<p><a href=\"shop-detail.html?gid=" + Good.gid + "\">" + Good.g_name + "</a></p>" +
                            "</div>" +
                            "<div class=\"product-action\">" +
                            "<a href=\"#\" class=\"add-to-btn small-btn\">" +
                            "<i class=\"flaticon-shopping-cart\"></i>" +
                            "<span>添加到购物车</span>" +
                            "<h5 class=\"product-price\">$" + Good.price * Good.count + "</h5>" +
                            "</a>" +
                            "<div class=\"add-wishlist\">" +
                            "<i class=\"fa fa-heart-o\"></i>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                    } else {
                        div = "<div id=\"good-" + index + "\" style=\"display: none\" class=\"col-xl-4 col-lg-6 col-sm-6\">" +
                            "<div class=\"product\">" +
                            "<div class=\"product-img-wrap\">" +
                            "<a href=\"shop-detail.html?gid=" + Good.gid + "\">" +
                            "<img src=\"" + Good.g_src + "\" alt=\"img\">" +
                            "</a>" +
                            "</div>" +
                            "<div class=\"product-content-wrap\">" +
                            "<div class=\"product-content\">" +
                            "<p><a href=\"shop-detail.html?gid=" + Good.gid + "\">" + Good.g_name + "</a></p>" +
                            "</div>" +
                            "<div class=\"product-action\">" +
                            "<a href=\"#\" class=\"add-to-btn small-btn\">" +
                            "<i class=\"flaticon-shopping-cart\"></i>" +
                            "<span>添加到购物车</span>" +
                            "<h5 class=\"product-price\"><del style='color: gray;font-weight: 300'>" + "$" + Good.price + "</del><ins style='padding-left: 5px'>" + "$" + Good.price * Good.count + "</ins></h5>" +
                            "</a>" +
                            "<div class=\"add-wishlist\">" +
                            "<i class=\"fa fa-heart-o\"></i>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                    }
                }
                $("#Goods").append(div);
            });
        }

        function initGoods() {
            // alert("initGoods");
            var order = $("#orderBy").val();
            $.get("bxx/daily_push", function (result) {
                $.each(result, function (index, Good) {
                    var div = "<div class=\"product list-product d-flex align-items-center bg-white br-5 mb-30\">" +
                        "<div class=\"product-img-wrap\">" +
                        "<img src=\"" + Good.g_src + "\" alt=\"img\">" +
                        "</div>" +
                        "<div class=\"product-content-wrap\">" +
                        "<div class=\"product-content\">" +
                        "<p><a href=\"shop-detail.html?gid=" + Good.gid + "\">" + Good.g_name + "</a>" +
                        "</p>" +
                        "</div>" +
                        "<div class=\"product-action\">" +
                        "<a href=\"#\" class=\"add-to-btn small-btn\">" +
                        "<i class=\"flaticon-shopping-cart\"></i>" +
                        "<span>加入购物车</span>" +
                        "<h5 class=\"product-price\">$" + Good.price * Good.count + "</h5>" +
                        "</a>" +
                        "</div>" +
                        "</div>" +
                        "</div>";
                    $("#daily_push").append(div);
                });
            });
            $.get("bxx/shop_findAll", {"order": order}, function (result) {
                appendGoods(result);
                getPages();
            });
        }

        function getPages() {
            $.get("bxx/shop_getPages", function (result) {
                var pages = result;
                $("#pagectr").empty();
                for (var i = 1; i <= pages; i++) {
                    var option = "<a style='padding-left: 20px' href=\"javascript:void(0)\" onclick=\"toPage(" + i + ")\">" + i + "</a>";
                    $("#pagectr").append(option);
                }
            });
        }

        function findByType(t_id) {
            var order = $("#orderBy").val();
            $.get("bxx/shop_findByType", {"t_id": t_id, "order": order}, function (result) {
                appendGoods(result);
                getPages();
            });
        }

        function findAll() {
            var order = $("#orderBy").val();
            $.get("bxx/shop_findAll", {"order": order}, function (result) {
                appendGoods(result);
                getPages();
            });
        }

        function toPage(pageNum) {
            $("div[id^='good-']").hide();
            var index1 = (pageNum - 1) * 16;
            var index2 = pageNum * 16 - 1;
            for (var i = index1; i <= index2; i++) {
                var id = "#good-" + i;
                $(id).show();
            }
        }

        function mainSerch() {
            var t_id = $("#types_search").val();
            var g_name = $("#g_name").val();
            var order = $("#orderBy").val();
            $.post("bxx/shop_mainSerch", {"t_id": t_id, "g_name": g_name, "order": order}, function (result) {
                appendGoods(result);
                getPages();
            });
        }

        $(function () {
            initGoods();
            $("#orderBy").change(function () {
                var order = $(this).val();
                $.get("bxx/shop_changeOrder", {"order": order}, function (result) {
                    appendGoods(result);
                    getPages();
                })
            });
        });
    </script>
</head>

<body>
<div class="page-wrapper">

    <!-- Preloader -->
    <div class="preloader"></div>


    <!--====================================================================
                            Start Header area
    =====================================================================-->
    <header class="main-header">
        <div class="container">
            <div class="header-inner">
                <div class="logo">
                    <a href="index.html"><img class="logo-image" src="images/logo.png" alt="Organik Logo"/></a>
                </div>

                <div class="categories">
                    <button><i class="flaticon-list"></i>
                        <span>分类目录</span></button>
                    <ul>
                        <li><a href="javascript:void(0)" onclick="findAll()"><i class="flaticon-apple"></i> 所有类别</a>
                        </li>
                        <li><a href="javascript:void(0)" onclick="findByType(1)"><i
                                class="flaticon-chicken-hand-drawn-outline"></i> 水果</a></li>
                        <li><a href="javascript:void(0)" onclick="findByType(2)"><i
                                class="flaticon-pressure-washer"></i> 蔬菜</a></li>
                        <li><a href="javascript:void(0)" onclick="findByType(3)"><i class="flaticon-pest"></i> 果酱</a>
                        </li>
                        <li><a href="javascript:void(0)" onclick="findByType(4)"><i class="flaticon-stationery"></i> 果汁</a>
                        </li>
                        <li><a href="javascript:void(0)" onclick="findByType(5)"><i class="flaticon-make-up"></i> 主食</a>
                        </li>
                    </ul>
                </div>

                <div id="mainSerch" action="#" class="menu-search">
                    <select id="types_search" name="select-category">
                        <option value="0">所有类别</option>
                        <option value="1">水果</option>
                        <option value="2">蔬菜</option>
                        <option value="2">果酱</option>
                        <option value="4">果汁</option>
                        <option value="5">主食</option>
                    </select>
                    <input id="g_name" type="search" placeholder="搜索" required>
                    <button type="button" onclick="mainSerch()">search</button>
                </div>

                <div class="menu-collections">
                    <div class="collection-item watch">
                        <i class="flaticon-heart"></i>
                        <div class="collection-inner">
                            <div class="alert single-collection">
                                <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                <div class="collection-image">
                                    <img src="assets2/img/shop/cart-1.png" alt="">
                                </div>
                                <div class="collection-content">
                                    <p>丹麦全脂牛奶</p>
                                    <h6>$120.00</h6>
                                </div>
                            </div>
                            <div class="alert single-collection">
                                <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                <div class="collection-image">
                                    <img src="assets2/img/shop/cart-2.png" alt="">
                                </div>
                                <div class="collection-content">
                                    <p>健康黄木瓜</p>
                                    <h6>$120.00</h6>
                                </div>
                            </div>
                            <div class="collection-btn">
                                <a href="cart.html" class="theme-btn bg-blue no-shadow mx-auto">添加到购物车</a>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item cart">
                        <i class="flaticon-shopping-cart"></i>
                        <div class="collection-inner">
                            <div class="alert single-collection">
                                <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                <div class="collection-image">

                                    <img src="assets2/img/shop/cart-1.png" alt="">
                                </div>
                                <div class="collection-content">
                                    <p>丹麦全脂牛奶</p>
                                    <h6>$120.00</h6>
                                </div>
                            </div>
                            <div class="alert single-collection">
                                <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                <div class="collection-image">
                                    <img src="assets2/img/shop/cart-2.png" alt="">
                                </div>
                                <div class="collection-content">
                                    <p>健康黄木瓜</p>
                                    <h6>$120.00</h6>
                                </div>
                            </div>
                            <div class="collection-btn">
                                <a href="cart.html" class="theme-btn bg-blue no-shadow mr-10">查看购物车</a>
                                <a href="checkout.html" class="theme-btn ml-auto no-shadow">结账</a>
                            </div>
                        </div>
                    </div>
                    <div class="collection-item profile">
                        <i class="flaticon-user-1"></i>
                        <div class="collection-inner">
                            <ul>
                                <li><a href="#">已买过的宝贝</a></li>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="checkout.html">结账</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="main-menu">
                    <button><i class="flaticon-list-menu"></i></button>
                    <ul>
                        <li><a href="index.html">主页</a></li>
                        <li class="dropdown"><a href="#">我们的博客</a>
                            <ul>
                                <li><a href="blog.html">所有博客</a></li>
                                <li><a href="blog-details.html">博客详细信息</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"><a href="#">购物</a>
                            <ul>
                                <li><a href="shop.html">店铺页面</a></li>
                                <li><a href="about-us - success.html">关于我们的小故事</a></li>
                                <li><a href="cart.html">我的购物车</a></li>
                                <li><a href="checkout.html">退出</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"><a href="#">入口</a>
                            <ul>
                                <li><a href="sign-in.html">登录</a></li>
                                <li><a href="sign-up.html">注册</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                    <div class="menu-overlay"></div>
                </div>
            </div>
        </div>
        <div class="collection-close"></div>
    </header>
    <!--====================================================================
                            End Header area
    =====================================================================-->


    <!--====================================================================
        Start Banner Section
    =====================================================================-->
    <section class="banner-section" style="background-image:url(assets2/img/banner.png);">
        <div class="container">
            <div class="banner-inner text-center">
                <h2 class="page-title">商店</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">回到主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">商店</li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>
    <!--====================================================================
        End Banner Section
    =====================================================================-->


    <!--====================================================================
       Start Shop Page
   =====================================================================-->
    <section class="shop-page mt-120 rmt-80 mb-90 rmb-50">
        <div class="container">
            <div class="row">

                <div class="col-xl-3 col-lg-4">
                    <div class="shop-sidebar">
                        <div class="shop-widget b1">
                            <div class="shop-widget-title">
                                <h5><em class="flaticon-list"></em>分类目录</h5>
                            </div>
                            <ul>
                                <li><a href="javascript:void(0)" onclick="findAll()"><i class="flaticon-apple"></i> 所有类别</a>
                                </li>
                                <li><a href="javascript:void(0)" onclick="findByType(1)"><i
                                        class="flaticon-chicken-hand-drawn-outline"></i> 水果</a></li>
                                <li><a href="javascript:void(0)" onclick="findByType(2)"><i
                                        class="flaticon-pressure-washer"></i> 蔬菜</a></li>
                                <li><a href="javascript:void(0)" onclick="findByType(3)"><i class="flaticon-pest"></i>
                                    果酱</a></li>
                                <li><a href="javascript:void(0)" onclick="findByType(4)"><i
                                        class="flaticon-stationery"></i> 果汁</a></li>
                                <li><a href="javascript:void(0)" onclick="findByType(5)"><i
                                        class="flaticon-make-up"></i> 主食</a></li>
                            </ul>
                        </div>
                        <div id="daily_push" class="shop-widget b1">
                            <div class="shop-widget-title">
                                <h5>今日推送</h5>
                            </div>

                        </div>

                        <div class="shop-widget widget-product b1">
                            <!--widget-product -->
                            <div class="special-offer-product bg-white p-25 br-5">
                                <p align="center">合作商户</p>
                                <div class="client-item" align="center">
                                    <a href="#" target="_blank">
                                        <img src="images/client/client_1.png" alt=""/>
                                    </a>
                                </div>
                                <hr/>
                                <div class="client-item" align="center">
                                    <a href="#" target="_blank">
                                        <img src="images/client/client_2.png" alt=""/>
                                    </a>
                                </div>
                                <hr/>
                                <div class="client-item" align="center">
                                    <a href="#" target="_blank">
                                        <img src="images/client/client_3.png" alt=""/>
                                    </a>
                                </div>
                                <hr/>
                                <div class="client-item" align="center">
                                    <a href="#" target="_blank">
                                        <img src="images/client/client_4.png" alt=""/>
                                    </a>
                                </div>
                                <hr/>
                                <div class="client-item" align="center">
                                    <a href="#" target="_blank">
                                        <img src="images/client/client_5.png" alt=""/>
                                    </a>
                                </div>
                                <hr/>

                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-xl-9 col-lg-8">
                    <div class="shop-items">

                        <div class="search-result-header">
                            <h5>显示相关商品</h5>
                            <div class="sort-by">
                                <span id="pagectr"></span>
                            </div>
                            <div class="sort-by">
                                <h5>排序:</h5>
                                <select id="orderBy" name="#">
                                    <option value="g_sales" selected>销量</option>
                                    <option value="price">价格</option>
                                </select>
                            </div>
                        </div>
                        <div id="Goods" class="row">
                            <span>商品显示ajax</span>

                        </div>
                    </div>
                </div>
            </div>
        </div>


    </section>
    <!--====================================================================
       End Shop Page
   =====================================================================-->


    <!--====================================================================
                       Start footer section
   =====================================================================-->
    <footer class="footer bg-black pt-100 text-lg-left text-center">
        <div class="container">
            <div class="row">

                <!--Footer Column-->
                <div class="col-lg-3 col-md-12 mb-30">
                    <div class="footer-widget logo-widget mr-20">
                        <div class="footer-logo">
                            <a href="index.html"><img src="images/footer_logo.png" class="footer-logo" alt=""/></a>
                        </div>
                        <p>欢迎来到有机商城。我们的产品是新鲜收获的，经过清洗后即可装箱，最后从我们的家庭农场运到您家门口。</p>
                        <div class="footer-social-icon">
                            <ul class="social-style-one">
                                <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!--Footer Column-->
                <div class="col-lg-2 col-md-3 mb-30">
                    <div class="footer-widget links-widget float-lg-right mr-40">
                        <h5 class="footer-title mb-30">推荐信息</h5>
                        <ul class="list">
                            <li><a href="#">新产品</a></li>
                            <li><a href="#">畅销品</a></li>
                            <li><a href="#">我们的博客</a></li>
                            <li><a href="#">关于我们的商城</a></li>
                        </ul>
                    </div>
                </div>

                <!--Footer Column-->
                <div class="col-lg-4 col-md-5 mb-30">
                    <div class="footer-widget form-widget ml-115 mr-30">
                        <h5 class="footer-title mb-30">订阅</h5>
                        <p>输入您的电子邮件地址作为我们的邮件列表，督促我们每日精进。</p>
                        <form class="subscribe">
                            <input type="email" placeholder="您的邮件地址" required>
                            <button type="submit">发送</button>
                        </form>
                    </div>
                </div>

                <!--Footer Column-->
                <div class="col-lg-3 col-md-4 mb-30">
                    <div class="footer-widget pament-widget">
                        <h5 class="footer-title mb-30">支付方式</h5>
                        <ul class="list">
                            <li><a href="#"><img src="assets2/img/pay-method/visa.png" alt=""></a></li>
                            <li><a href="#"><img src="assets2/img/pay-method/mastercard.png" alt=""></a></li>
                            <li><a href="#"><img src="assets2/img/pay-method/discover.png" alt=""></a></li>
                            <li><a href="#"><img src="assets2/img/pay-method/americanexpress.png" alt=""></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">

                    <!-- Copyright Area-->
                    <div class="copyright text-center pl-10 pr-10 pt-30 pb-10 mt-55 rmt-35 mb-65">
                        <p>Copyright &copy; 2020.公司保留所有权利.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </footer>
    <!--====================================================================
                            End footer section
    =====================================================================-->


</div>
<!--End pagewrapper-->


<!-- Scroll Top Button -->
<button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>


<!-- jequery plugins -->
<script src="assets2/js/jquery.min.js"></script>
<script src="assets2/js/bootstrap-v4.1.3.min.js"></script>
<script src="assets2/js/jquery.nice-select.min.js"></script>
<script src="assets2/js/jquery.simpleLoadMore.min.js"></script>
<script src="assets2/js/slick.min.js"></script>
<script src="assets2/js/appear.js"></script>

<!-- Custom script -->
<script src="assets2/js/script.js"></script>

</body>

</html>
